import 'package:bike_ride/api/common_repository.dart';
import 'package:bike_ride/common/util/format.dart';
import 'package:bike_ride/common/util/hysize_fit.dart';
import 'package:bike_ride/common/widget/bottom_buttons.dart';
import 'package:bike_ride/common/widget/dialog/mydialog.dart';
import 'package:bike_ride/common/widget/form_builder.dart';
import 'package:bike_ride/common/widget/gallery/pick_img_gallery.dart';
import 'package:bike_ride/common/widget/page_title_widget.dart';
import 'package:bike_ride/common/widget/xb_button.dart';
import 'package:bike_ride/generated/l10n.dart';
import 'package:bike_ride/model/wallet/model/recharge_arrow_m.dart';
import 'package:bike_ride/res/style/color_styles.dart';
import 'package:bike_ride/res/style/theme_styles.dart';
import 'package:bike_ride/router/navigator_util.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';

/// 最近充值记录详情
class LatelyRechargeInfoPage extends StatefulWidget {
  final RechargeArrowM model;

  const LatelyRechargeInfoPage({super.key, required this.model});

  @override
  State<LatelyRechargeInfoPage> createState() => _LatelyRechargeInfoPageState();
}

class _LatelyRechargeInfoPageState extends State<LatelyRechargeInfoPage> {
  final _textController = TextEditingController();
  List<String> imgUrl = [];

  /// 是否提交退款中
  bool isUploadType = false;

  Future<bool> _future() async {
    final text = _textController.text.trim();
    // if(text.isEmpty){
    //   EasyLoading.showError(S.current.pleaseInputRefundReason);
    //   return false;
    // }
    final result = await CommonRepository.rechargeRefundApplyIdl(
        imgUrl: imgUrl, remark: text,orderId: widget.model.id!);
    return result;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      backgroundColor: ColorStyles.color_F3F4F5,
      body: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          PageTitleWidget(title: isUploadType ? S.current.applyRefund : S.current.rechargeOrder),
          Expanded(
            child: ListView(
              padding: EdgeInsets.symmetric(
                  horizontal: ThemeStyles.pagePaddingHorizontal),
              physics: const BouncingScrollPhysics(),
              shrinkWrap: true,
              children: [
                _buildContainer1(),
                _buildContainer2(),
                if (isUploadType) _buildSubmitContainer(),
              ],
            ),
          ),
        ],
      ),
      bottomNavigationBar: BottomButtons(
        hasRadius: true,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            if (isUploadType)
              Padding(
                padding: EdgeInsets.only(bottom: 8.rpx),
                child: Text(
                  S.current.giftTips,
                  style: TextStyle(
                      color: ColorStyles.color_999999, fontSize: 24.rpx),
                ),
              ),
            XbButton(
              width: MediaQuery.of(context).size.width -
                  2 * ThemeStyles.pagePaddingHorizontal,
              borderRadius: BorderRadius.all(Radius.circular(24.rpx)),
              onPressed: () async {
                if (isUploadType) {
                  final result = await _future();
                  if (result && mounted && context.mounted) {
                    NavigatorUtil.back(context, arguments: true);
                  }
                } else {
                  setState(() {
                    isUploadType = true;
                  });
                }
              },
              child: Text(
                isUploadType ? S.current.submitApply : S.current.applyRefund,
                style: TextStyle(fontSize: 32.rpx),
              ),
            )
          ],
        ),
      ),
    );
  }

  Widget _buildContainer1() {
    return Container(
      width: MediaQuery.of(context).size.width -
          2 * ThemeStyles.pagePaddingHorizontal,
      margin: EdgeInsets.symmetric(vertical: 16.rpx),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(24.rpx),
        gradient: LinearGradient(colors: [
          ColorStyles.color_gradient_start,
          Theme.of(context).colorScheme.primary,
        ]),
      ),
      child: Column(
        children: [
          SizedBox(
            height: 24.rpx,
          ),
          Text(
            '${S.current.rechargeAmount}(${S.current.yuan})',
            style: TextStyle(
                color: ColorStyles.color_FFFFFF,
                fontSize: 28.rpx,
                fontWeight: FontWeight.w500),
          ),
          SizedBox(
            height: 32.rpx,
          ),
          Text(
            '${widget.model.amount}',
            style: TextStyle(
                color: ColorStyles.color_FFFFFF,
                fontSize: 64.rpx,
                fontWeight: FontWeight.bold),
          ),
        ],
      ),
    );
  }

  Widget _buildContainer2() {
    return Container(
      width: MediaQuery.of(context).size.width -
          2 * ThemeStyles.pagePaddingHorizontal,
      padding: EdgeInsets.symmetric(horizontal: 28.rpx, vertical: 26.rpx),
      decoration: BoxDecoration(
        color: ColorStyles.color_FFFFFF,
        borderRadius: BorderRadius.circular(24.rpx),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            S.current.orderInfo,
            style: TextStyle(
                fontSize: 32.rpx,
                color: ColorStyles.color_333333,
                fontWeight: FontWeight.w500),
          ),
          const Divider(
            color: ColorStyles.color_F5F5F5,
          ),
          _buildInfoItem(
            left: S.current.rechargeAmount,
            right: widget.model.amount.toString(),
          ),
          _buildInfoItem(
              left: S.current.canRefundAmount,
              right: widget.model.allowRefundAmount.toString(),
              color: ColorStyles.color_FF4D4F),
          _buildInfoItem(
            left: S.current.rechargeTime,
            right: formatTimestamp(widget.model.payTime),
          ),
          _buildInfoItem(
            left: S.current.orderId,
            right: widget.model.id.toString(),
          ),
        ],
      ),
    );
  }

  Widget _buildSubmitContainer() {
    return Container(
      width: MediaQuery.of(context).size.width -
          2 * ThemeStyles.pagePaddingHorizontal,
      margin: EdgeInsets.only(top: 16.rpx,bottom: 32.rpx),
      padding: EdgeInsets.symmetric(horizontal: 28.rpx, vertical: 26.rpx),
      decoration: BoxDecoration(
        color: ColorStyles.color_FFFFFF,
        borderRadius: BorderRadius.circular(24.rpx),
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            S.current.refundReason,
            style: TextStyle(
                fontSize: 32.rpx,
                color: ColorStyles.color_333333,
                fontWeight: FontWeight.w500),
          ),
          const Divider(
            color: ColorStyles.color_F5F5F5,
          ),
          FormBuilder.buildXbFormTextArea(context,
              controller: _textController, hintText: S.current.refundEditTips),
          PickImgGallery(
            initList: imgUrl,
            maxCount: 4,
            width: 150.rpx,
            buttonColor: const Color(0xfff1f3f8),
            onChange: (List<String> list) {
              imgUrl = list;
            },
          ),
        ],
      ),
    );
  }

  Widget _buildInfoItem(
      {required String left,
      required String right,
      Color color = ColorStyles.color_999999}) {
    return Row(
      children: [
        Container(
          width: 180.rpx,
          padding: EdgeInsets.symmetric(vertical: 8.rpx),
          child: Text(left,
              style:
                  TextStyle(color: ColorStyles.color_333333, fontSize: 28.rpx)),
        ),
        Text(
          right,
          style: TextStyle(color: color, fontSize: 24.rpx),
        ),
      ],
    );
  }
}
